.bg-red,
.bg-yellow,
.bg-aqua,
.bg-blue,
.bg-light-blue,
.bg-green,
.bg-navy,
.bg-teal,
.bg-olive,
.bg-lime,
.bg-orange,
.bg-fuchsia,
.bg-purple,
.bg-maroon,
.bg-black,
.bg-red-active,
.bg-yellow-active,
.bg-aqua-active,
.bg-blue-active,
.bg-light-blue-active,
.bg-green-active,
.bg-navy-active,
.bg-teal-active,
.bg-olive-active,
.bg-lime-active,
.bg-orange-active,
.bg-fuchsia-active,
.bg-purple-active,
.bg-maroon-active,
.bg-black-active,
.callout.callout-danger,
.callout.callout-warning,
.callout.callout-info,
.callout.callout-success,
.alert-success,
.alert-danger,
.alert-error,
.alert-warning,
.alert-info,
.label-danger,
.label-info,
.label-warning,
.label-primary,
.label-success,
.modal-primary .modal-body,
.modal-primary .modal-header,
.modal-primary .modal-footer,
.modal-warning .modal-body,
.modal-warning .modal-header,
.modal-warning .modal-footer,
.modal-info .modal-body,
.modal-info .modal-header,
.modal-info .modal-footer,
.modal-success .modal-body,
.modal-success .modal-header,
.modal-success .modal-footer,
.modal-danger .modal-body,
.modal-danger .modal-header,
.modal-danger .modal-footer {
    color: #fff !important;
}
.bg-gray {
    color: #000;
    background-color: #d2d6de !important;
}
.bg-gray-light {
    background-color: #f7f7f7;
}
.bg-black {
    background-color: #111111 !important;
}
.bg-red,
.callout.callout-danger,
.alert-danger,
.alert-error,
.label-danger,
.modal-danger .modal-body {
    background-color: #dd4b39 !important;
}
.bg-yellow,
.callout.callout-warning,
.alert-warning,
.label-warning,
.modal-warning .modal-body {
    background-color: #f39c12 !important;
}
.bg-aqua,
.callout.callout-info,
.alert-info,
.label-info,
.modal-info .modal-body {
    background-color: #00c0ef !important;
}
.bg-blue {
    background-color: #0073b7 !important;
}
.bg-light-blue,
.label-primary,
.modal-primary .modal-body {
    background-color: #3c8dbc !important;
}
.bg-green,
.callout.callout-success,
.alert-success,
.label-success,
.modal-success .modal-body {
    background-color: #00a65a !important;
}
.bg-navy {
    background-color: #001f3f !important;
}
.bg-teal {
    background-color: #39cccc !important;
}
.bg-olive {
    background-color: #3d9970 !important;
}
.bg-lime {
    background-color: #01ff70 !important;
}
.bg-orange {
    background-color: #ff851b !important;
}
.bg-fuchsia {
    background-color: #f012be !important;
}
.bg-purple {
    background-color: #605ca8 !important;
}
.bg-maroon {
    background-color: #d81b60 !important;
}
.bg-gray-active {
    color: #000;
    background-color: #b5bbc8 !important;
}
.bg-black-active {
    background-color: #000000 !important;
}
.bg-red-active,
.modal-danger .modal-header,
.modal-danger .modal-footer {
    background-color: #d33724 !important;
}
.bg-yellow-active,
.modal-warning .modal-header,
.modal-warning .modal-footer {
    background-color: #db8b0b !important;
}
.bg-aqua-active,
.modal-info .modal-header,
.modal-info .modal-footer {
    background-color: #00a7d0 !important;
}
.bg-blue-active {
    background-color: #005384 !important;
}
.bg-light-blue-active,
.modal-primary .modal-header,
.modal-primary .modal-footer {
    background-color: #357ca5 !important;
}
.bg-green-active,
.modal-success .modal-header,
.modal-success .modal-footer {
    background-color: #008d4c !important;
}
.bg-navy-active {
    background-color: #001a35 !important;
}
.bg-teal-active {
    background-color: #30bbbb !important;
}
.bg-olive-active {
    background-color: #368763 !important;
}
.bg-lime-active {
    background-color: #00e765 !important;
}
.bg-orange-active {
    background-color: #ff7701 !important;
}
.bg-fuchsia-active {
    background-color: #db0ead !important;
}
.bg-purple-active {
    background-color: #555299 !important;
}
.bg-maroon-active {
    background-color: #ca195a !important;
}
[class^="bg-"].disabled {
    opacity: 0.65;
    filter: alpha(opacity=65);
}
.text-red {
    color: #dd4b39 !important;
}
.text-yellow {
    color: #f39c12 !important;
}
.text-aqua {
    color: #00c0ef !important;
}
.text-blue {
    color: #0073b7 !important;
}
.text-black {
    color: #111111 !important;
}
.text-light-blue {
    color: #3c8dbc !important;
}
.text-green {
    color: #00a65a !important;
}
.text-gray {
    color: #d2d6de !important;
}
.text-navy {
    color: #001f3f !important;
}
.text-teal {
    color: #39cccc !important;
}
.text-olive {
    color: #3d9970 !important;
}
.text-lime {
    color: #01ff70 !important;
}
.text-orange {
    color: #ff851b !important;
}
.text-fuchsia {
    color: #f012be !important;
}
.text-purple {
    color: #605ca8 !important;
}
.text-maroon {
    color: #d81b60 !important;
}

.bg-green{
    background-color:#04BE02;
}
.bg-red{
    background-color:#EF4F4F;
}
.bg-blue2 {/*蓝色*/
    background-color: rgba(227, 242, 249, 1);
}
.bg-blue{
    background-color: #3c8dbc;
}
.bg-blue:not(.weui_btn_disabled):visited {
    color: #FFFFFF;
}
.bg-blue:not(.weui_btn_disabled):active {
    color: rgba(255, 255, 255, 0.4);
    background-color: #18b4ed;
}
.bg-blue-b {
    color: #18b4ed;
    border: 1px solid #18b4ed;
}
button.bg-blue-b,
input.bg-blue-b {
    border-width: 1px;
    background-color: transparent;
}
.bg-blue-b:active {
    border-color: #18b4ed;
}
.bg-blue-b:after {
    border-width: 0;
}
.bg-orange {/*橙色*/
    background-color: #FF6600;
}
.bg-orange:not(.weui_btn_disabled):visited {
    color: #FFFFFF;
}
.bg-orange:not(.weui_btn_disabled):active {
    color: rgba(255, 255, 255, 0.4);
    background-color: #FF6600;
}
.bg-orange-b {
    color: #FF6600;
    border: 1px solid #FF6600;
}
button.bg-orange-b,
input.bg-orange-b {
    border-width: 1px;
    background-color: transparent;
}
.bg-orange-b:active {
    border-color: #FF6600;
}
.bg-orange-b:after {
    border-width: 0;
}
.bg-gray {
    background-color: #e7e7e7;
}
/*字体大小 生成11-32 35 40 45 50像素字体 */
.f11 {
    font-size: 11px !important;
    line-height: 11px; }

.f12 {
    font-size: 12px !important;
    line-height: 12px; }

.f13 {
    font-size: 13px !important;
    line-height: 13px; }

.f14 {
    font-size: 14px !important;
    line-height: 14px; }

.f15 {
    font-size: 15px !important;
    line-height: 15px; }

.f16 {
    font-size: 16px !important;
    line-height: 16px; }

.f17 {
    font-size: 17px !important;
    line-height: 17px; }

.f18 {
    font-size: 18px !important;
    line-height: 18px; }

.f19 {
    font-size: 19px !important;
    line-height: 19px; }

.f20 {
    font-size: 20px !important;
    line-height: 20px; }

.f21 {
    font-size: 21px !important;
    line-height: 21px; }

.f22 {
    font-size: 22px !important;
    line-height: 22px; }

.f23 {
    font-size: 23px !important;
    line-height: 23px; }

.f24 {
    font-size: 24px !important;
    line-height: 24px; }

.f25 {
    font-size: 25px !important;
    line-height: 25px; }

.f26 {
    font-size: 26px !important;
    line-height: 26px; }

.f27 {
    font-size: 27px !important;
    line-height: 27px; }

.f28 {
    font-size: 28px !important;
    line-height: 28px; }

.f29 {
    font-size: 29px !important;
    line-height: 29px; }

.f30 {
    font-size: 30px !important;
    line-height: 30px; }

.f31 {
    font-size: 31px !important;
    line-height: 31px; }

.f32 {
    font-size: 32px !important;
    line-height: 32px; }

.f35 {
    font-size: 35px !important;
    line-height: 35px; }

.f40 {
    font-size: 40px !important;
    line-height: 40px; }

.f45 {
    font-size: 45px !important;
    line-height: 45px; }

.f50 {
    font-size: 50px !important;
    line-height: 50px; }
.f55 {
    font-size: 55px !important;
    line-height: 55px; }
/*字体颜色*/
.f-red {
    color: #ef4f4f !important; }

.f-green {
    color: #04be02 !important; }

.f-blue {
    color: #18b4ed !important; }

.f-black {
    color: #333 !important; }

.f-white {
    color: #FFF !important; }

.f-zi {
    color: #FF33CC !important; }

.f-gray {
    color: #CCCCCC !important; }

.f-yellow {
    color: #FFFF66 !important; }

.f-orange {
    color: #FF6600 !important; }
/*Tab*/
.tab-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:100;
}
.tab-bottom {
    bottom: 0;
    width: 100%;
    position: fixed;
}
/*header*/
.weui-header {
    position: relative;
    padding: 3px 0;
    -webkit-box-sizing: border-box;

}
.weui-header .weui-header-title,.weui-header h1 {
    margin: 0 88px;
    margin-left: 100px;
    line-height: 40px;
    text-align: center;
    height: 40px;
    font-size: 18px;
    font-weight: 400;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff
}
.weui-header .weui-header-title a,.weui-header .weui-header-title a:active,.weui-header h1 a,.weui-header h1 a:active {
    color: #fff
}
.weui-header .weui-header-left,.weui-header .weui-header-right {
    position: absolute;
    top: 14px;
    display: block;
    font-size: 16px;
    line-height: 21px;
    color:#FFF;
}
.weui-header .weui-header-left a,.weui-header .weui-header-left button,.weui-header .weui-header-right a,.weui-header .weui-header-right button {
    float: left;
    margin-right: 8px;
}
.weui-header .weui-header-left a:active,.weui-header .weui-header-left button:active,.weui-header .weui-header-right a:active,.weui-header .weui-header-right button:active {
    opacity: .8
}
.weui-header .weui-header-left {
    left: 18px
}
.weui-header .weui-header-right {
    right: 15px
}
.weui-header .weui-header-right a,.weui-header .weui-header-right button {
    margin-left: 8px;
    margin-right: 0
}


.weui-tabbar__item.weui-bar__item--on .weui-tabbar__icon>i,.weui-tabbar__item.weui-bar__item--on i.weui-tabbar__icon {
    color: #04BE02;
}

.text-center{text-align: center;}



/*topbar*/
.weui-topbar {
    position: fixed;
    padding: 3px 0;
    -webkit-box-sizing: border-box;
    width:100%;
    z-index:1;

}
.weui-topbar .weui-header-title,.weui-topbar h1 {
    margin: 0 88px;
    margin-left: 100px;
    line-height: 40px;
    text-align: center;
    height: 40px;
    font-size: 18px;
    font-weight: 400;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff
}
.weui-topbar .weui-header-title a,.weui-topbar .weui-header-title a:active,.weui-topbar h1 a,.weui-topbar h1 a:active {
    color: #fff
}
.weui-topbar .weui-header-left,.weui-topbar .weui-header-right {
    position: absolute;
    top: 14px;
    display: block;
    font-size: 16px;
    line-height: 21px;
    color:#FFF;
}
.weui-topbar .weui-header-left a,.weui-topbar .weui-header-left button,.weui-topbar .weui-header-right a,.weui-topbar .weui-header-right button {
    float: left;
    margin-right: 8px;
}
.weui-topbar .weui-header-left a:active,.weui-topbar .weui-header-left button:active,.weui-topbar .weui-header-right a:active,.weui-topbar .weui-header-right button:active {
    opacity: .8
}
.weui-topbar .weui-header-left {
    left: 18px
}
.weui-topbar .weui-header-right {
    right: 15px
}
.weui-topbar .weui-header-right a,.weui-topbar .weui-header-right button {
    margin-left: 8px;
    margin-right: 0
}


/*navigator*/
.weui-navigator{background:#fafafa;position:relative;padding:0;margin:0}
.weui-navigator-list{width:100%;list-style:none;display:-webkit-box;margin:0 auto}
.weui-navigator-list li{list-style:none;line-height:34px;font-size:16px;font-weight:bold;text-align:center;-webkit-box-flex:1;display:-webkit-box;white-space:nowrap;-webkit-box-align:center;-webkit-box-pack:center}
.weui-navigator.weui-navigator-wrapper{z-index:1;width:100%;overflow:hidden;position:relative;-webkit-backface-visibility:hidden}
.weui-navigator-list li a{/* text-decoration:none; */color:#666;display:block;width:100%;-webkit-box-sizing:border-box;padding:0 15px;}
.weui-navigator-list li.weui-state-hover,.weui-navigator-list li.weui-state-active a{color:#04be02}
.weui-navigator-list li.weui-state-hover,.weui-navigator-list li.weui-state-active a:after{content:'';display:block;height:2px;background-color:#04be02}
.weui-navigator .weui-navigator-list{
    /*display:table;*/
    table-layout:fixed;white-space:nowrap;width:auto}
.weui-navigator .weui-navigator-list:after{content:'';clear:both;display:inline-block;width:0;height:0;overflow:hidden}
.weui-navigator .weui-navigator-list li{display:inline-block}

.weui_tab {
    position: relative;
    height: 100%;
}
/*weui-tab*/
.weui_tab_nav
{
    /*display: box;*/
    display: -webkit-box;
    display: -webkit-flex;
    /*display: display:flex;*/
}
.weui_tab_nav .weui_nav_green
{
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    width: 100%;
    height: 30px;
    padding: 0;
    font-size: 14px;
    line-height: 31px;
    text-align: center;
    border: 1px solid #04be02;
    border-width: 1px 1px 1px 0;
    color: #04be02;
    white-space: nowrap;
    background: #fdfdfd
}
.weui_tab_nav .weui_nav_green.bg_green
{
    border-color: #04be02;
    color: #fff;
    background: #04be02
}
.weui_tab_nav .weui_nav_red
{
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    width: 100%;
    height: 30px;
    padding: 0;
    font-size: 14px;
    line-height: 31px;
    text-align: center;
    border: 1px solid #ef4f4f;
    border-width: 1px 1px 1px 0;
    color: #ef4f4f;
    white-space: nowrap;
    background: #fdfdfd
}
.weui_tab_nav .weui_nav_red.bg_red
{
    border-color: #EF4F4F;
    color: #fff;
    background: #EF4F4F
}
.weui_navbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    z-index: 500;
    top: 0;
    width: 100%;
    background-color: #fafafa;
}
.weui_navbar_item {
    position: relative;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 13px 0;
    text-align: center;
    font-size: 15px;
    -webkit-tap-highlight-color: transparent;
}
.weui_tab_nav .weui_navbar_item:first-child
{
    border-width: 1px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-clip: padding-box
}
.weui_tab_nav .weui_navbar_item:last-child
{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-clip: padding-box
}

.weui_navbar_item.tab-green {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-bottom: 3px solid #04be02;
    color: #04be02;
}
.weui_navbar_item.tab-red {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-bottom: 3px solid #ef4f4f;
    color: #ef4f4f;
}
.weui_navbar_item.tab-blue {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-bottom: 3px solid #18b4ed;
    color: #18b4ed;
}
.weui_navbar_item:after {border-right:none;}
/*分割线*/
.weui-loadmore {
    font-size: 14px;
    line-height: 1.6em;
    margin: 1.5em auto;
    text-align: center;
    width: 65%;
}

.weui-menu{position:fixed;bottom:0;left:0;right:0;height:50px;background:#f8f8f8;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-flow:row nowrap;flex-flow:row nowrap;border-top:1px solid #ccc;outline:0;margin:0;padding:0;-webkit-box-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;align-items:center}
.weui-menu-inner{border-left:1px solid #ccc;height:100%;width:100%;text-align:center;cursor:pointer;position:relative;user-select:none;-webkit-user-select:none}
.weui-menu-inner:last-child{background-position:30px center}
.weui-menu-inner>em{display:inline-block;height:10px;width:10px;background:url() no-repeat;background-size:10px 10px}
.weui-menu-inner span{line-height:50px}
.weui-menu-inner ul{position:absolute;left:5px;right:5px;top:0;opacity:0;background:#fff;font-size:13px;border:1px solid #ccc;word-break:break-all;border-radius:7px;text-align:center;transition:all .3s;-webkit-transition:all .3s;list-style-type:none}
.weui-menu-inner ul li{border-bottom:1px solid #ccc;height:50px;line-height:50px;width:auto;}
.weui-menu-inner ul li a {color:#000;font-size:16px;
}
.weui-menu-inner ul li:last-child{border-bottom:0}
.weui-menu-inner ul em{position:absolute;height:0;width:0;border:5px solid transparent;border-top-color:#fff;left:50%;bottom:-10px;transform:translateX(-50%);-webkit-transform:translateX(-50%)}
.weui-menu .weui-bar__item--on i,.weui-menu .weui-bar__item--on .weui-tabbar__label {color:#04BE02;
}

.weui-menu-inner .weui-tabbar__icon i{font-size: 16px;}
.weui-menu-inner .weui-tabbar__label{font-size: 16px;}


.weui-tab {
    position: relative;
    height: 100%;
}
.weui-tab .demos-header {padding: 35px 0;
}
.weui-tab .demos-header .demos-title {    text-align: center;
    font-size: 34px;
    color: #3cc51f;
    font-weight: 400;
    /*margin: 0 15%;*/
}
.demos-header .demos-second-title {
    text-align: center;
    font-size: 24px;
    color: #3cc51f;
    font-weight: 400;
    margin: 0 15%;
}

.page{background-color:#f8f8f8}
.page{position:fixed;top:0;right:0;bottom:0;left:0}
.page{overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;z-index:1}
.page.js_show{opacity:1}
.page__hd{padding:40px}
.page__bd_spacing{padding:0 15px}
.page__ft{padding-top:40px;padding-bottom:10px;text-align:center}
.page__ft img{height:19px}
.page__ft.j_bottom{position:absolute;bottom:0;left:0;right:0}
.page__title{text-align:left;font-size:20px;font-weight:400}
.page__desc{margin-top:5px;color:#888;text-align:left;font-size:14px}
.page.home .page__intro-icon{margin-top:-.2em;margin-left:5px;width:16px;height:16px;vertical-align:middle}
.page.home .page__title{font-size:0;margin-bottom:15px}
.page.home .page__bd img{width:30px;height:30px}
.page.home .page__bd li{margin:10px 0;background-color:#fff;overflow:hidden;border-radius:2px;cursor:pointer}
.page.home .page__bd li.js_show .weui-flex{opacity:.4}
.page.home .page__bd li.js_show .page__category{height:auto}
.page.home .page__bd li.js_show .page__category-content{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
.page.home .page__bd li:first-child{margin-top:0}
.page.home .page__category{height:0;overflow:hidden}
.page.home .page__category-content{opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}
.page.home .weui-flex{padding:20px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:.3s;transition:.3s}
.page.home .weui-cells{margin-top:0}
.page.home .weui-cells:after,.page.home .weui-cells:before{display:none}
.page.home .weui-cell{padding-left:20px;padding-right:20px}
.page.home .weui-cell:before{left:20px;right:20px}
.page.button .page__bd{padding:0 15px}
.page.button .button-sp-area{margin:0 auto;padding:15px 0;width:60%}
.page.cell .page__bd,.page.form .page__bd{padding-bottom:30px}
.page.actionsheet,.page.dialog{background-color:#fff}
.page.dialog .page__bd{padding:0 15px}
.page.msg,.page.msg_success,.page.msg_warn,.page.toast{background-color:#fff}
.page.panel .page__bd{padding-bottom:20px}
.page.article{background-color:#fff}
.page.icons{text-align:center}
.page.icons .page__bd{padding:0 40px;text-align:left}
.page.icons .icon-box{margin-bottom:25px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}
.page.icons .icon-box i{margin-right:18px}
.page.icons .icon-box__ctn{-webkit-flex-shrink:100;flex-shrink:100}
.page.icons .icon-box__title{font-weight:400}
.page.icons .icon-box__desc{margin-top:6px;font-size:12px;color:#888}
.page.icons .icon_sp_area{margin-top:10px;text-align:left}
.page.icons .icon_sp_area i:before{margin-bottom:5px}
.page.flex .placeholder{margin:5px;padding:0 10px;background-color:#ebebeb;height:2.3em;line-height:2.3em;text-align:center;color:#cfcfcf}
.page.loadmore{background-color:#fff}
.page.layers{overflow-x:hidden;-webkit-perspective:1000px;perspective:1000px}
@media only screen and (max-width:320px){.page.layers .page__hd{padding-left:20px;padding-right:20px}
}
.page.layers .page__bd{position:relative}
.page.layers .page__desc{min-height:4.8em}
.page.layers .layers__layer{position:absolute;left:50%;width:150px;height:266px;margin-left:-75px;box-sizing:border-box;-webkit-transition:.5s;transition:.5s;background:url(images/layers/transparent.gif) no-repeat 50%;background-size:contain;font-size:14px;color:#fff}
.page.layers .layers__layer span{position:absolute;bottom:5px;left:0;right:0;text-align:center;-webkit-transition:.5s;transition:.5s}
.page.layers .layers__layer:last-child span{color:#aaa}
.page.layers .layers__layer.j_hide{opacity:0}
.page.layers .layers__layer.j_pic span{color:transparent}
@media only screen and (min-width:375px) and (min-height:603px){.page.layers .layers__layer{width:180px;height:320px;margin-left:-90px}
}
@media only screen and (min-width:414px) and (min-height:640px){.page.layers .layers__layer{width:200px;height:355px;margin-left:-100px}
}
.page.layers .layers__layer_popout{border:1px solid hsla(0,0%,80%,.5);z-index:4}
.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px)}
@media only screen and (max-width:320px){.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px)}
}
.page.layers .layers__layer_popout.j_pic{border-color:transparent;background-image:url(images/layers/popout.png)}
.page.layers .layers__layer_mask{background-color:rgba(0,0,0,.5);z-index:3}
.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px)}
@media only screen and (max-width:320px){.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px)}
}
.page.layers .layers__layer_navigation{background-color:rgba(40,187,102,.5);z-index:2}
.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}
@media only screen and (max-width:320px){.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px)}
}
.page.layers .layers__layer_navigation.j_pic{background-color:transparent;background-image:url(images/layers/navigation.png)}
.page.layers .layers__layer_content{background-color:#fff;z-index:1}
.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px)}
@media only screen and (max-width:320px){.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}
}
.page.layers .layers__layer_content.j_pic{background-image:url(images/layers/content.png)}
.page.searchbar .searchbar-result{display:none;margin-top:0;font-size:14px}
.page.searchbar .searchbar-result .weui-cell__bd{padding:2px 0 2px 20px;color:#666}
.page.actionsheet,.page.picker{overflow:hidden}
.page.picker{background-color:#fff}
.page.gallery{overflow:hidden}
@-webkit-keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}
    to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}
}
@keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}
    to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}
}
@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}
    to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}
}
@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}
    to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}
}
.page.slideIn{-webkit-animation:a .2s forwards;animation:a .2s forwards}
.page.slideOut{-webkit-animation:b .2s forwards;animation:b .2s forwards}
.page.searchbar .searchbar-result{display:none;margin-top:0;font-size:14px}
.page.picker{background-color:#fff}
.page.gallery{overflow:hidden}
@-webkit-keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}
@keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}
@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}
@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}
.page.slideIn{-webkit-animation:a .2s forwards;animation:a .2s forwards}
.page.slideOut{-webkit-animation:b .2s forwards;animation:b .2s forwards}

/*
 * Component: Timeline
 * -------------------
 */
.timeline {
    position: relative;
    margin: 0 0 30px 0;
    padding: 0;
    list-style: none;
}
.timeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ddd;
    left: 31px;
    margin: 0;
    border-radius: 2px;
}
.timeline > li {
    position: relative;
    margin-right: 10px;
    margin-bottom: 15px;
}
.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table;
}
.timeline > li:after {
    clear: both;
}
.timeline > li > .timeline-item {
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin-top: 0;
    background: #fff;
    color: #444;
    margin-left: 60px;
    margin-right: 15px;
    padding: 0;
    position: relative;
}
.timeline > li > .timeline-item > .time {
    color: #999;
    float: right;
    padding: 10px;
    font-size: 12px;
}
.timeline > li > .timeline-item > .timeline-header {
    margin: 0;
    color: #555;
    border-bottom: 1px solid #f4f4f4;
    padding: 10px;
    font-size: 16px;
    line-height: 1.1;
}
.timeline > li > .timeline-item > .timeline-header > a {
    font-weight: 600;
}
.timeline > li > .timeline-item > .timeline-body,
.timeline > li > .timeline-item > .timeline-footer {
    padding: 10px;
}
.timeline > li > .fa,
.timeline > li > .glyphicon,
.timeline > li > .ion {
    width: 30px;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    position: absolute;
    color: #666;
    background: #d2d6de;
    border-radius: 50%;
    text-align: center;
    left: 18px;
    top: 0;
}
.timeline > .time-label > span {
    font-weight: 600;
    padding: 5px;
    display: inline-block;
    background-color: #fff;
    border-radius: 4px;
}
.timeline-inverse > li > .timeline-item {
    background: #f0f0f0;
    border: 1px solid #ddd;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.timeline-inverse > li > .timeline-item > .timeline-header {
    border-bottom-color: #ddd;
}